<template>
	<!-- 卡券 -->
	<view>
		<u-navbar title="领取卡券" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#FFFFFF"
			:titleStyle="titleStyle">
		</u-navbar>
		<view v-if="dataList.length>0" class="cenV">
			<scroll-view scroll-y="true" style="height: 100vh;" :scroll-y="true" @scroll="onScroll" :scroll-with-animation="true"
				:refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onDataList"
				refresher-default-style="white" @scrolltolower="scrolltolower">
				<view  class="itemV" v-for="(item,index) in dataList" :key="index">
					<image class="iv" src="../../static/me/quan_.svg" mode="aspectFill"></image>
					<view class="itemCenV">
						<view class="leftV">
							<view class="moneyV">
								<view class="moneyTv1">¥{{item.price}}</view>
								<view class="moneyTv2">{{item.memo}}</view>
							</view>
							<view class="timeV">有效期至：{{item.endtime}}</view>
						</view>
						<view class="rightV">
							<!-- <view class="shareTv" @click="onShareClick(item)">立即分享</view> -->
							<button class="shareTv" open-type="share" :data-buyer="item">立即分享</button>

							<view class="shengyuTv">还剩{{item.nums}}张</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view  v-if="dataList.length==0" class="noV">
			<image src="../../static/me/no_card.svg"></image>
			<view>暂无卡券</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				dataList: [],
				shareData: {},
				mPage: 1,
				scrollTop: 0,
				triggered: false,
				mRoleId:""
			}
		},
		onLoad(e) {
			this.mRoleId = e.id;
			this.getCardsList();
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = res.target.dataset.buyer.shop_id;
			let userId = res.target.dataset.buyer.user_id;
			let couponId = res.target.dataset.buyer.coupon_id;
			return {
				title: this.shareData.shop_name,
				path: `pages/me/StoresDetails?shopid=` + shopId + `&userid=` + userId + `&couponid=` +couponId+ `&roleid=` +this.mRoleId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			onDataList() {
				if (this.scrollTop == 0) {
					this.triggered = true;
					this.mPage = 1
					this.getCardsList()
				}
			},
			scrolltolower() { //上拉加载
				this.mPage++
				this.getCardsList()
			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getCardsList() {
				this.$api.getCardsList({
					data: {
						page: this.mPage,
						role_id:this.mRoleId
					}
				}).then((res) => {
					if (this.mPage == 1) {
						this.dataList = res.rows;
					} else {
						this.dataList.push(...res.rows)
					}
					this.triggered = false;
				}).catch((e) => {
					this.triggered = false;
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			getCardsJian(oid) {
				this.$api.getCardsJian({
					id: this.shareData.id,
					role_id:this.mRoleId
				}).then((res) => {

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onShareClick(item) {
				this.shareData = item;
				console.log("开始分享点击")
			},
		}
	}
</script>

<style lang="scss">
	.cenV {
		height: 100%;
		min-height: 100%;
		max-height: 100%;
	}

	.itemV {
		position: relative;
		height: 200rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}

	.iv {
		height: 100%;
		width: 100%;
	}

	.itemCenV {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		height: 100%;

		.leftV {
			flex: 7;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30rpx;

			.moneyV {
				display: flex;
				align-items: baseline;

				.moneyTv1 {
					font-size: 60rpx;
					color: #333333;
				}

				.moneyTv2 {
					margin-left: 5 rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.timeV {
				display: flex;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.rightV {
			flex: 3;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.shareTv {
				background: #1F1F1F;
				border-radius: 6rpx;
				color: #fff;
				padding-left: 22rpx;
				padding-right: 22rpx;
				font-size: 24rpx;
			}

			.shengyuTv {
				margin-top: 19rpx;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.noV {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		image {
			width: 220rpx;
			height: 194rpx;
		}

		view {
			font-size: 32rpx;
			color: #545454;
			margin-top: 47rpx;
		}
	}
</style>
